<template>
  <div class="planning-container">
    <!-- <div ref="chart" style="height: 21vh; width: 100%"></div> -->
    <div class="page-header">
      <span style="width: 800px; display: flex">
        <router-link class="back-link" to="/main/renshi">
          <i class="el-icon-arrow-left"></i>
          返回
        </router-link>
        <h1>人力资源规划</h1>
      </span>
    </div>

    <div class="content-wrapper">
      <div class="section-header">
        <div class="section-title">
          <i class="el-icon-user"></i>
          <span>人力资源规划管理</span>
        </div>
        <div class="section-desc">战略性人力资源规划与管理</div>
      </div>

      <div class="planning-grid">
        <!-- 战略规划 -->
        <div class="planning-card">
          <div class="card-header">
            <i class="el-icon-s-flag"></i>
            <h3>战略规划</h3>
          </div>
          <div class="card-content">
            <router-link
              class="plan-link"
              to="/main/renshi/renliziyuanguihua/zhanluecm/zhanluecm"
            >
              <i class="el-icon-data-analysis"></i>
              <span>战略层面的人力资源规划</span>
            </router-link>
          </div>
        </div>

        <!-- 需求预测 -->
        <div class="planning-card">
          <div class="card-header">
            <i class="el-icon-data-line"></i>
            <h3>需求预测</h3>
          </div>
          <div class="card-content">
            <router-link
              class="plan-link"
              to="/main/renshi/renliziyuanguihua/renlixuqiuyc/renlixuqiuyc"
            >
              <i class="el-icon-data-board"></i>
              <span>人力资源需求预测</span>
            </router-link>
            <router-link
              class="plan-link"
              to="/main/renshi/renliziyuanguihua/renligongjiyc/renligongjiyc"
            >
              <i class="el-icon-data-board"></i>
              <span>人力资源供给预测</span>
            </router-link>
          </div>
        </div>

        <!-- 资源规划 -->
        <div class="planning-card">
          <div class="card-header">
            <i class="el-icon-set-up"></i>
            <h3>资源规划</h3>
          </div>
          <div class="card-content">
            <router-link
              class="plan-link"
              to="/main/renshi/renliziyuanguihua/rlzygongxuphgh/rlzygongxuphgh"
            >
              <i class="el-icon-coordinate"></i>
              <span>人力资源供需平衡规划</span>
            </router-link>
            <router-link
              class="plan-link"
              to="/main/renshi/renliziyuanguihua/rlzypeizhigh/rlzypeizhigh"
            >
              <i class="el-icon-share"></i>
              <span>人力资源配置规划</span>
            </router-link>
          </div>
        </div>

        <!-- 培训发展 -->
        <div class="planning-card">
          <div class="card-header">
            <i class="el-icon-reading"></i>
            <h3>培训发展</h3>
          </div>
          <div class="card-content">
            <router-link
              class="plan-link"
              to="/main/renshi/renliziyuanguihua/peixunkaifagh/peixunkaifagh"
            >
              <i class="el-icon-notebook-2"></i>
              <span>培训与开发规划</span>
            </router-link>
          </div>
        </div>

        <!-- 薪酬福利 -->
        <div class="planning-card">
          <div class="card-header">
            <i class="el-icon-money"></i>
            <h3>薪酬福利</h3>
          </div>
          <div class="card-content">
            <router-link
              class="plan-link"
              to="/main/renshi/renliziyuanguihua/xinchoufuligh/xinchoufuligh"
            >
              <i class="el-icon-wallet"></i>
              <span>薪酬与福利规划</span>
            </router-link>
          </div>
        </div>

        <!-- 预测评估 -->
        <div class="planning-card">
          <div class="card-header">
            <i class="el-icon-refresh"></i>
            <h3>预测评估</h3>
          </div>
          <div class="card-content">
            <router-link
              class="plan-link"
              to="/main/renshi/renliziyuanguihua/rlzyyucegh/rlzyyucegh"
            >
              <i class="el-icon-data-analysis"></i>
              <span>人力资源预测规划</span>
            </router-link>
            <router-link
              class="plan-link"
              to="/main/renshi/renliziyuanguihua/rlzypingutiaozhen/rlzypingutiaozhen"
            >
              <i class="el-icon-edit-outline"></i>
              <span>人力资源规划的评估与调整</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- <script>
export default {
  mounted() {
    this.checkScrollbar();
    window.addEventListener("resize", this.checkScrollbar);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.checkScrollbar);
  },
  methods: {
    checkScrollbar() {
      const div = this.$refs.chart;
      if (document.body.scrollHeight > window.innerHeight) {
        div.style.display = "none";
      } else {
        div.style.display = "block";
      }
    },
  },
};
</script> -->

<style lang="scss" scoped>
.planning-container {
  min-height: 100vh;
  // background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    width: 800px;
    margin: 0px auto 20px auto;

    .back-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #409eff;
      font-size: 14px;
      margin-right: 20px;
      transition: all 0.3s;

      i {
        margin-right: 5px;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  .content-wrapper {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding: 24px;
    width: 800px;
    margin: 0px auto 0px auto;

    .section-header {
      text-align: center;
      margin-bottom: 30px;

      .section-title {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, #409eff, #66b1ff);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

        i {
          margin-right: 8px;
          font-size: 20px;
        }

        span {
          font-size: 18px;
          font-weight: 500;
        }
      }

      .section-desc {
        color: #909399;
        font-size: 14px;
      }
    }

    .planning-grid {
      display: grid;

      grid-template-columns: repeat(2, 1fr);
      width: 800px;
      margin: 0px auto;
      gap: 20px;
      // padding: 0 20px;

      .planning-card {
        background-color: #f5f7fa;
        border: 1px solid #ebeef5;
        border-radius: 8px;
        overflow: hidden;

        .card-header {
          display: flex;
          align-items: center;
          padding: 16px;
          background: linear-gradient(135deg, #409eff, #66b1ff);
          color: white;

          i {
            font-size: 20px;
            margin-right: 8px;
          }

          h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
          }
        }

        .card-content {
          padding: 16px;

          .plan-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #606266;
            padding: 12px;
            border-radius: 4px;
            transition: all 0.3s ease;
            margin-bottom: 8px;
            background: white;

            i {
              font-size: 16px;
              margin-right: 8px;
              color: #409eff;
            }

            span {
              flex: 1;
              font-size: 14px;
            }

            &:hover {
              transform: translateX(5px);
              background-color: #ecf5ff;
              color: #409eff;
              box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .planning-container {
    padding: 12px;

    .page-header {
      padding: 12px 16px;
    }

    .content-wrapper {
      padding: 20px 16px;

      .section-header {
        margin-bottom: 24px;

        .section-title {
          padding: 8px 16px;

          i {
            font-size: 18px;
          }

          span {
            font-size: 16px;
          }
        }
      }

      .planning-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;

        .planning-card {
          .card-header {
            padding: 12px;

            i {
              font-size: 18px;
            }

            h3 {
              font-size: 14px;
            }
          }

          .card-content {
            padding: 12px;

            .plan-link {
              padding: 10px;

              i {
                font-size: 14px;
              }

              span {
                font-size: 13px;
              }
            }
          }
        }
      }
    }
  }
}
</style>